import { createApp, ComponentPublicInstance, Component } from 'vue'

// 挂载组件
export const MakeLayerMountComponent = (com: Component, data: object) => {

    const div = document.createElement("div");
    const instance = createApp(com, {
        ...data
    });

    instance.mount(div)

    document.body.appendChild(div)
    return {
        div,
        instance
    }

}

type BaseElementStyle = {
    left?: string | number,
    top?: string | number,
    width?: string | number,
    height?: string | number
}

/**
 * 更新元素的位置
 * @param div 
 * @param params 
 */
export const updateElementStyle = (div: HTMLElement, params: BaseElementStyle) => {
    let { left, top, width, height } = params;

    left ? (div.firstChild as HTMLElement).style.left = left + 'px' : '';
    top ? (div.firstChild as HTMLElement).style.top = top + 'px' : '';
    width ? (div.firstChild as HTMLElement).style.width = width + 'px' : '';
    height ? (div.firstChild as HTMLElement).style.height = height + 'px' : '';
}

